<template>
  <div class="ticket_card">
    <div class="card_header"></div>
    <div class="card_body"></div>
    <div class="right_hole"></div>
  </div>
</template>

<style scoped>
.ticket_card {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden; /* 关键，保证挖空后不超出 */
}

/* 中间分割线 */
.ticket_card::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 70%;
  border-top: 0.03rem dashed #e4e8ec;
}

/* 左边挖掉半圆 */
.ticket_card::after {
  content: "";
  position: absolute;
  top: calc(60% - 0.2rem);
  left: -0.32rem;
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background: #f6f6f6;
}

/* 右边半圆 */
.ticket_card .right_hole {
  content: "";
  position: absolute;
  right: -0.32rem;
  top: calc(60% - 0.2rem);
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background: #f6f6f6;
}

.card_header {
  height: 0.05rem;
}

.card_body {
  height: 1rem;
}
</style>
